<template>
    门店名称:<input type="text" placeholder="请输入门店名称" v-model="mrname"/>
    <input type="button" value="查询" @click="Show"/>
<table border="1">
    <tr>
        <td>门店名称</td>
        <td>门店描述</td>
        <td>分店名称</td>
        <td>门店地址</td>
        <td>门店电话号</td>
        <td>操作</td>
    </tr>
    <tbody>
            <tr v-for="items in info">
            <td>{{ items.shopName }}</td>
            <td>{{ items.shopDescription }}</td>
            <td>{{ items.fenshopname }}</td>
            <td>{{ items.shopAddress }}</td>
            <td>{{ items.phone }}</td>
            <td>
                <input type="button" value="详情" @click="Xiq(items.id)"/>
            </td>
            </tr>
    </tbody>
</table>
一共{{ Page.totalCount }}条,每页{{ Page.Size }}条,当前{{Page.Index  }}/{{Page.pageCount}}页
<a href="#" @click="Fanye(1)">首页</a>
<a href="#" @click="Fanye(Page.Index-1)">上一页</a>
<a href="#" @click="Fanye(Page.Index+1)">下一页</a>
<a href="#" @click="Fanye(Page.pageCount)">尾页</a>
</template>
<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const router=useRouter();

onMounted(()=>{
    Show();
})

const info=ref([{
      "id": 0,
      "shopName": "",
      "shopDescription": "",
      "fenshopname": "",
      "shopAddress": "",
      "phone": ""
}])

const mrname=ref("");

const Page=({
    Index:1,
    Size:2,
    pageCount:5,
    totalCount:7,
    
})

const Show=()=>{
    axios.get("https://localhost:7216/api/Shop/GetShopListpagr",{
        params:{
            name:mrname.value,
            Index:Page.Index,
            Size:Page.Size
        }
    })
    .then(res=>{
        info.value=res.data.items;

        Page.pageCount=res.data.pageCount;
        Page.totalCount=res.data.totalCount;
    })
    .catch(err=>{
        console.log(err);
    })
}

const Fanye=(a:number)=>{

    if(a<1){
        alert('当前已经是第一页');
        a=1;
    }
    if(a>Page.pageCount){
        alert('当前已经是最后一页');
        a=Page.pageCount;
    }
    Page.Index=a;
    Show();
}

const Xiq=(id:number)=>{
    router.push({
        name: 'Xiangqing',
        params:{
            id:id,
        }
    })
}
</script>